<template>
  <div class="app-container">
    <el-button type="primary" size="small" @click="handlePDFView"
      >预览PDF</el-button
    >
    <el-button type="primary" size="small" @click="handlePDFView2"
      >预览PDF2</el-button
    >
    <el-button type="primary" size="small" @click="handleDOCXView"
      >预览DOCX</el-button
    >
    <el-button type="primary" size="small" @click="handleXLSXView"
      >预览XLSX</el-button
    >
    <el-dialog
      v-model.asnyc="visible"
      title="预览PDF"
      fullscreen="true"
      append-to-body="true"
      destroy-on-close="true"
    >
      <PdfPreview :source="pdfSource" v-if="showType == 'pdf'" />
      <DocxView v-if="showType == 'docx'" :src="docx" />
      <XlsxView v-if="showType == 'xlsx'" :src="xlsx" />
      <PdfView v-if="showType == 'pdf2'" :src="pdf2" />
    </el-dialog>
  </div>
</template>
<script setup>
import PdfPreview from "@/components/PdfPreview";
import DocxView from "@/components/OfficeView/docx";
import XlsxView from "@/components/OfficeView/xlsx";
import PdfView from "@/components/OfficeView/pdf";
import { ref } from "vue";

// 可以是 URL、Base64、二进制数据或文档代理
const visible = ref(false);
const pdfSource = ref("");
const showType = ref("");
const handlePDFView = () => {
  visible.value = true;
  pdfSource.value = import.meta.env.VITE_APP_BASE_API + "/profile/1.pdf";
  showType.value = "pdf";
};
const docx = ref(""); //设置文档网络地址，可以是相对地址
const handleDOCXView = () => {
  visible.value = true;
  docx.value = import.meta.env.VITE_APP_BASE_API + "/profile/1.docx";
  // docx.value = "http://static.shanhuxueyuan.com/test6.docx";
  showType.value = "docx";
};
const xlsx = ref(""); //设置文档网络地址，可以是相对地址
const handleXLSXView = () => {
  visible.value = true;
  xlsx.value = "http://static.shanhuxueyuan.com/demo/excel.xlsx";
  // docx.value = "http://static.shanhuxueyuan.com/test6.docx";
  showType.value = "xlsx";
};

const pdf2 = ref("");
const handlePDFView2 = () => {
  visible.value = true;
  pdf2.value = import.meta.env.VITE_APP_BASE_API + "/profile/1.pdf";
  showType.value = "pdf2";
};
</script>
<style lang="scss" scoped></style>
